<template>
  <div class="testList">
  	<div class="testList-title">{{testName}}</div>
  	<el-row type="flex" class="row-bg" justify="space-around">
  		<el-col :sm="22" :md="18" :lg="18"  :xs="22">
  			<div class="grid-content bg-purple-light testList-wrap">
  				<el-form ref="subjectList" :model="subjectList" >
	  				<div class="remind"><span>考试提醒：
	  					考试时长：<i>{{testDuration}}分钟，</i></span><span>距离考试结束：</i><countDown :endTime="examEndTime" :callback="callback" endText="考试结束了"></countDown></span>
	  				</div>
	    			<p class="remind-content">考试时间结束后，将自动提交试卷</p>
	    			<div class="testList-content">
	    				<ul v-if='subjectList.radioWrap.length>0'>
	    					<h3>一、单选题</h3>
	    					<li v-for="(v,i) in subjectList.radioWrap">
	    						<p>{{i+1}}、{{v.question}}</p>
	    						<div class="cell" v-for="(v1,i1) in v.option">
	    							<el-radio v-model="v.eAnswer" :label="i1==0?'A':(i1==1?'B':(i1==2?'C':'D'))">{{v1}}</el-radio>
	    						</div>
	    					</li>
	    				</ul>
	    				<ul v-if='subjectList.checkboxWrap.length>0'>
	    					<h3>二、多选题</h3>
	    					<li v-for="(v,i) in subjectList.checkboxWrap">
	    						<p>{{i+1}}、{{v.question}}</p>
	    						<el-checkbox-group 
								    v-model="v.eAnswer">
								    <el-checkbox  v-for="(v1,i1) in v.option" :label="v1" :key="i1" class="cell">{{v1}}</el-checkbox>
								  </el-checkbox-group>
	    					</li>
	    				</ul>
	    				<ul v-if='subjectList.judgeWrap.length>0'>
	    					<h3>三、判断题</h3>
	    					<li v-for="(v,i) in subjectList.judgeWrap">
	    						<p>{{i+1}}、{{v.question}}</p>
	    						<div v-for="(v1,i1) in v.option" class="cell">
	    							<el-radio v-model="v.eAnswer" :label="i1==0?'A':'B'">{{v1}}</el-radio>
	    						</div>
	    					</li>
	    				</ul>
	    				<el-form-item>
	    					<el-button type="primary" @click="onSubmit">提交试卷</el-button>
	    				</el-form-item>
	    			</div>
		    	</el-form>
  			</div>
  		</el-col>
  	</el-row>
  </div>
</template>

<script>
import mydata from '@/components/myData.vue'
export default {
  name: 'testList',
  data () {
    return {
    	//考试时长
    	testDuration:'',
    	//判断试卷是否提交
    	isSubmit:false,
      testId:'',
      testContent:[],
      testName:"",
      //开始考试时间
      startTime:'',
      //考试经历时间
      spendTime:'',
      //考试结束时间
      examEndTime:'',
      //交卷时间
      addTime:"",
      //是否归档
      isPigeonhole:'',
      //考生id
      testPersonnelId:'',
      //全部题目
      subjectWrap:[],
      //题目列表
      subjectList:{
      	radioWrap:[],
      	checkboxWrap:[],
      	judgeWrap:[]
      },
      //平均分数
      unitScore1:"",
      unitScore2:"",
      unitScore3:"",
      //总分数
      grade:0,
      grade1:0,
      grade2:0,
      grade3:0
    }
  },
  components:{
  	countDown:mydata
  },
 	computed:{
	 	
 	},
 	methods:{
 		//提交试卷函数
 		submitTest(){
			//交卷时间
			var time=Date.parse(new Date())+'';
  		this.addTime=parseInt(time.substr(0,10));
  		this.spendTime=this.addTime-this.startTime;
			//分数 点击清空
			this.grade1=0;this.grade2=0;this.grade3=0;
			//传到后台的试卷Json
			var myRadioWrap=[];
			var myCheckboxWrap=[];
			var myJudgeWrap=[];
			//计算分数
			var that=this
			//单选的
			this.subjectList.radioWrap.forEach(function(data1,i){
				myRadioWrap[i]={
					Id: data1.Id,
        type: data1.type,
        question:data1.question,
        option:data1.option.join(';'),
        answer:data1.answer,
        knowledgePoint:data1.knowledgePoint,
        analysis: data1.analysis,
        level: data1.level,
        status: data1.status,
        addTime: data1.addTime,
        updateTime:data1.updateTime,
        eAnswer:data1.eAnswer
				}
				if(data1.eAnswer==data1.answer){
					that.grade1=that.grade1+parseInt(that.unitScore1)
				}
			})
			//多选的
			this.subjectList.checkboxWrap.forEach(function(data1,i){
				var eAnswer1=[];
				data1.eAnswer.forEach(function(data2,j){
					eAnswer1[j]=data2.substr(0,1)
				})
				eAnswer1.sort();
				var eAnswer2=eAnswer1.join(';');
				if(eAnswer2===data1.answer){
					that.grade2=that.grade2+parseInt(that.unitScore2)
				}
				myCheckboxWrap[i]={
					Id: data1.Id,
        type: data1.type,
        question:data1.question,
        option:data1.option.join(';'),
        answer:data1.answer,
        knowledgePoint:data1.knowledgePoint,
        analysis: data1.analysis,
        level: data1.level,
        status: data1.status,
        addTime: data1.addTime,
        updateTime:data1.updateTime,
        eAnswer:eAnswer2
				}
			})
			//判断题
			this.subjectList.judgeWrap.forEach(function(data1,i){
				myJudgeWrap[i]={
					Id: data1.Id,
	        type: data1.type,
	        question:data1.question,
	        option:data1.option.join(';'),
	        answer:data1.answer,
	        knowledgePoint:data1.knowledgePoint,
	        analysis: data1.analysis,
	        level: data1.level,
	        status: data1.status,
	        addTime: data1.addTime,
	        updateTime:data1.updateTime,
	        eAnswer:data1.eAnswer
				}
				if(data1.eAnswer==data1.answer){
					that.grade3=that.grade3+parseInt(that.unitScore3)
				}
			})
			this.grade=this.grade1+this.grade2+this.grade3
				//testPaperDetail：试卷详情
			var submitContent=[
				{type:1,unitScore:this.unitScore1,level:0,list:myRadioWrap},
				{type:2,unitScore:this.unitScore2,level:0,list:myCheckboxWrap},
				{type:3,unitScore:this.unitScore3,level:0,list:myJudgeWrap}
			]
			this.axios({
				method:'post',
				url:that.$store.state.globalTestApi+"/admin/AcademicRecords/add",
				data:{
					grade:that.grade,
					spendTime:that.spendTime,
					testPaperDetail:JSON.stringify(submitContent),
					isPigeonhole:that.isPigeonhole,
					testPersonnelId:that.testPersonnelId,
					addTime:that.addTime,
					StartTime:that.startTime
				}
			}).then(function(res){
				if(res.data.msg=="操作成功"){
					that.$message.success('提交试卷成功');
					that.$router.push({
	        	name:"myTest",
	        	query:{}
	        })
				}else{
					that.$message.error('提交试卷失败');
				}
			})
 		},
		//点击提交试卷
		onSubmit(){
			this.$confirm('确定提交试卷？')
	    .then(_ => {
	    	this.isSubmit=true;
				this.submitTest()
			})
	    .catch(_ => {});
		},
		//倒计时
		callback(){
			if(!this.isSubmit){
				this.$alert('考试时间到，将自动提交试卷', {
          confirmButtonText: '确定',
          callback: action => {
          	this.submitTest()
          }
        })
			}
		}
 	},
  created:function(){
  	this.isSubmit=false;
  	//开始时间（进入考试时间）
  	var time=Date.parse(new Date())+'';
  	this.startTime=parseInt(time.substr(0,10));
  	//获取考试ID
  	this.testPersonnelId=this.$route.query.testPersonnelId;
  	//获取考试结束时间
  	this.examEndTime=this.$route.query.examEndTime;
  	//获取试卷内容
  	this.testId=this.$route.query.testId;
  	//获取是否归档信息
  	this.isPigeonhole=this.$route.query.isPigeonhole;
		var that=this;
		this.axios({
			method:'get',
			url:that.$store.state.globalTestApi+"/admin/TestPaper/getDetail?id="+that.testId,
			data:{}
		}).then(function(res){
			if(res.data.msg=="操作成功"){
				//试卷名字
				that.testName=res.data.data.testPaper.name
				//考试时长
				that.testDuration=res.data.data.testPaper.duration	
				that.subjectWrap=JSON.parse(res.data.data.testPaper.allSubject)
				that.subjectWrap.forEach(function(data2,i){
					//单选
					if(data2.type=="1"){
						that.unitScore1=data2.unitScore;
						that.subjectList.radioWrap=that.subjectList.radioWrap.concat(data2.list);
					}
					//多选
					if(data2.type=="2"){
						that.subjectList.checkboxWrap=that.subjectList.checkboxWrap.concat(data2.list);
						that.unitScore2=data2.unitScore;
					}
					//判断
					if(data2.type=="3"){
						that.subjectList.judgeWrap=that.subjectList.judgeWrap.concat(data2.list);
						that.unitScore3=data2.unitScore;
						
					}
				})
				//单选的选项
				that.subjectList.radioWrap.forEach(function(data3,j){
						that.subjectList.radioWrap[j].option=data3.option.split(';');
				})
				//多选的选项
				that.subjectList.checkboxWrap.forEach(function(data3,j){
					that.$set(that.subjectList.checkboxWrap[j],'eAnswer', [])
					that.subjectList.checkboxWrap[j].option=data3.option.split(';')
				})
				//判断的选项
				that.subjectList.judgeWrap.forEach(function(data3,j){
					that.subjectList.judgeWrap[j].option=data3.option.split(';')
				})
			}
		})
  }
}
</script>

<style scoped>
.testList .testList-title{padding-top: 80px;font-size: 32.59px;color: #fff;margin-bottom: 30px}
.testList .testList-wrap{padding:20px;background-color: #fff;box-shadow: 0px 0px 3px rgba(0,0,0,0.3);box-sizing: border-box;margin-bottom: 116px;}
.testList .remind{font-size: 14px;line-height: 30px;}
.testList .remind i{color: #386ce3;}
.testList .remind-content{color: #bb1515;font-size: 14px;}
.testList .testList-content{padding:10px 10% 50px 10%;box-sizing: border-box;text-align: left;}
.testList .testList-content h3{font-size: 18px;font-weight: normal;}
.testList .cell{display: inline-block;margin:0 20px;}
.testList .testList-wrap li{margin-bottom:20px;font-size: 14px;}
.testList .testList-wrap li p{margin-bottom: 5px;}
.testList .testList-content .el-form-item{margin-top: 80px;text-align: center;}
.testList .el-checkbox + .el-checkbox{margin-left:0px;margin:0 20px;}
@media screen and (max-width: 768px) {
	.testList .testList-title{font-size: 20px;padding-top:50px;}
	.testList .remind{font-size: 12px;line-height: 24px;}
	.testList .remind span{display: block;}
	.testList .remind-content{font-size: 12px;}
	.testList .testList-content{padding:10px 0 20px 0;}
	.testList .testList-content h3{font-size: 16px;}
	.testList .testList-wrap li{margin-bottom:10px;font-size: 12px;}
	.testList .cell{word-wrap: break-word;margin:2px 5px;width: 100%;}
	.testList .cell .el-radio .el-radio__label{padding-left: 4px;word-break:break-all;word-wrap:break-word}
	.testList .el-checkbox + .el-checkbox{margin-left:0px;margin:0 5px;}
}
</style>
<style>
	@media screen and (max-width: 768px) {
	.testList .cell .el-radio .el-radio__label{padding-left: 4px}	
	}
</style>
